import React, { useState, useEffect } from 'react'
import MyTabBar from '@/components/MyTabBar/MyTabBar';
import HomeHeader from './HomeHeader';
import { Swiper, Grid, Avatar, SpinLoading } from 'antd-mobile'
import { useNavigate } from '@/.umi/exports';
import { getHomeBanner, getCates, postItems } from '@/api';
import './index.less'
import InfiniteScroll from 'react-infinite-scroll-component';
import Items from './Items';


export default function Page() {

    const navigate = useNavigate()

    // banner轮播 数据
    const [banners, setBanners] = useState<any[]>([])
    const fetchBanners = () => {
        getHomeBanner().then(res => {
            if (res.data.code === 0) {
                setBanners(res.data.data)
            }
        })
    }

    // 首页宫格分类数据
    const [Cates, setCates] = useState<any[]>([])
    const fetchCates = () => {
        getCates().then(res => {
            if (res.data.code === 0) {
                setCates(res.data.data)
            }
        })
    }

    // banner轮播、首页宫格分类 数据
    useEffect(() => {
        fetchBanners()
        fetchCates()
    }, [])


    // 商品列表数据
    const [page, setPage] = useState(1)
    const [items, setItems] = useState<any[]>([])
    const fetchItems = () => {
        postItems({
            page,
            pageSize: 5
        }).then(res => {
            if (res.data.code === 0) {
                setItems([
                    ...items,
                    ...res.data.data.result
                ])
            }
            if (res.data.code === 700) {
                // 上拉加载 数据 加载到底，无更多数据
                setHasMore(false)
            }
        })
    }

    // 上拉加载 触底
    const reachBottomDown = () => {
        // 异步数据 需要useEffect监听page进行渲染
        setPage(page + 1)
        // console.log('1221');
        
    }

    useEffect(() => {
        // 商品列表数据
        fetchItems()
    }, [page])

    // 判断 上拉加载 是否还有更多数据  
    const [hasMore, setHasMore] = useState(true);




    return (
        <div className='home'>
            {/* 首页头部 */}
            <HomeHeader />

            {/* 轮播banner */}
            <div className='main-container'>
                <Swiper autoplay loop>
                    {
                        banners.map(banner => (
                            <Swiper.Item key={banner.id}>
                                <img src={banner.picUrl} alt="" />
                            </Swiper.Item>
                        ))
                    }

                </Swiper>


                {/* 宫格导航 */}
                <Grid columns={4} gap={4} >
                    {
                        Cates.map(cate => (
                            <Grid.Item
                                key={cate.id}
                                // 点击携带分类ID--去分类页
                                onClick={
                                    () => {
                                        navigate(`/itemLists?cateId=${cate.id}`)
                                    }
                                }
                            >
                                <Avatar
                                    fallback
                                    src={cate.icon}
                                    style={{ '--size': '35px' }}
                                />
                                <h6>{cate.name}</h6>
                            </Grid.Item>
                        ))
                    }
                </Grid>

                {/* 商品列表 */}
                <InfiniteScroll
                    dataLength={items.length} //This is important field to render the next data
                    next={reachBottomDown}
                    hasMore={hasMore}
                    loader={
                        <div style={{ padding: 20, display: 'flex', justifyContent: 'center' }}>
                            <SpinLoading color='primary' />
                        </div>
                    }
                    endMessage={
                        <p style={{ textAlign: 'center' }}>
                            <b>---到底啦，没有更多商品！---</b>
                        </p>
                    }
                >
                    {/* component组件items组件出口传参 */}
                    <Items items={items} />
                </InfiniteScroll>
            </div>

            {/* 底部TabBar */}
            <MyTabBar />
        </div>

    )
}
